<!-- table表格分类标签展示 -->
<template>
  <div class="label-group">
    <template v-for="(item, index) in labelList" :key="item.labelId">
      <div v-if="index < numberOfDisplay" class="base-label label-text" :style="(labelOptionsStyle as AnyObject)" :title="item.labelName">
        {{ item.labelName }}
      </div>
      <a-popover v-else-if="index === numberOfDisplay">
        <template #content>
          <div class="bottom-tooltip">
            <div v-for="(t, n) in labelList.slice(numberOfDisplay, labelList.length)" :key="n">
              <div class="base-label tooltip-label-text" :style="(labelOptionsStyle as AnyObject)" :title="t.labelName">
                {{ t.labelName }}
              </div>
            </div>
          </div>
        </template>
        <div class="base-label label-text" :style="(labelOptionsStyle as AnyObject)">...</div>
      </a-popover>
    </template>
  </div>
</template>

<script lang="ts" setup>
  interface AnyObject {
    [key: string]: any
  }
  export interface LabelItemType {
    id?: string
    labelId: string
    labelName: string
    projectId?: string
  }

  export interface LabelArrType {
    labelList?: Array<LabelItemType>
    numberOfDisplay?: number
    labelOptionsStyle?: AnyObject //style属性
  }
  withDefaults(defineProps<LabelArrType>(), {
    labelList: () => [],
    numberOfDisplay: 3,
    labelOptionsStyle: () => ({})
  })
</script>

<style lang="less" scoped>
  .label-group {
    display: flex;
    align-items: flex-start;
    height: 26px;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .base-label {
    justify-content: center;
    align-items: center;
    padding: 3px 6px;
    background: rgba(70, 134, 237, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    gap: 6px;
  }

  .label-text {
    overflow: hidden;
    width: max-content;
    min-width: 24px;
    font-size: 14px;
    text-align: center;
    text-overflow: ellipsis;
    color: #4686ed;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
    word-break: keep-all;
  }

  .tooltip-label-text {
    overflow: hidden;
    font-size: 14px;
    color: #4686ed;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
    word-break: keep-all;
  }

  .bottom-tooltip {
    display: flex;
    align-items: center;
    max-width: 688px;
    flex-wrap: wrap;
    gap: 6px;
  }
</style>
